<template>
  <div :class="role == 'user' ? 'message_box message_right' : 'message_box'">
    <div :class="role == 'user' ? 'message_item' : ''">
      <div class="message_header" v-html="htmlString(message)">
      </div>
      <div class="message_copy" v-if="role == 'assistant'" @click="copy" v-copyText="message">点我复制</div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import MarkdownIt from 'markdown-it'
// @ts-ignore
import mdKatex from 'markdown-it-katex'
import mdHighlight from 'markdown-it-highlightjs'
import "highlight.js/styles/a11y-dark.css";

const props = defineProps({
  role: {
    type: String,
    default: '',
  },
  message: {
    type: String,
    default: "",
  }
});

function htmlString(data) {
  const md = MarkdownIt().use(mdKatex).use(mdHighlight)
  return typeof data === 'function' ? md.render(data) : md.render(data)
}

const roleClass = {
  system: 'system',
  user: 'user',
  assistant: 'assistant',
}

const copy = () => {
  ElMessage({
    showClose: true,
    message: '复制成功',
    type: 'success'
  })
}
</script>

<style lang='scss' scoped>
.message_box {
  margin-bottom: 20px;
}

.message_header {
  background: #fff;
  padding: 5px 15px;
  line-height: 26px;
  font-size: 16px;
  width: 84%;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: block;
  color: rgb(148, 163, 184);
  overflow-wrap: break-word;
  border-radius: 0 10px 10px 10px;
}

.message_right {
  display: flex;
  justify-content: right;

  .message_header {
    background: rgb(127, 182, 255);
    color: #fff;
    border-radius: 10px 0 10px 10px;
  }
}

.message_item {
  width: 84%;

  .message_header {
    width: 100%;
  }
}

.message_copy {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
}
</style>